<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="../common/jspcommon.jsp"%>
<script type="text/javascript">
$(function(){
	var size = ${fn:length(photoList)};
	var index = ${index} ;
	box = $("#photo_view_img");
	box.click(function(e){
		var e = e || window.event ;
		posx = e.clientX ;
		//判断鼠标位置，鼠标位置大于图片1/2处加
		if(posx>document.documentElement.clientWidth/2){
			index++;
			if(index-1>=size){
				index=1;
			}
			$("#photoBox").load("taPhotoView.htm",{"family":"${family}","album":"${album}","index":index,"friendPhoto":'${friendPhoto}'});
		}else{
			index--;
			if(index<1){
				index=size;
			}
			$("#photoBox").load("taPhotoView.htm",{"family":"${family}","album":"${album}","index":index,"friendPhoto":'${friendPhoto}'});
		}
		e.preventDefault();
	}).mousemove(function(e){
		var e = e || window.event ;
		posx = e.clientX ;
		if(posx>document.documentElement.clientWidth/2){
			//需要用到以下两张鼠标的 绝对路径，请开源人员自行修改一下
			box.css('cursor','url(images/next.cur),pointer');
			box.attr('title','下一页');
		}else{
			box.css('cursor','url(images/prev.cur),pointer');
			box.attr('title','上一页');
		}
	}).mouseover(function(e){
		var e = e || window.event ;
		posx = e.clientX ;
		if(posx>document.documentElement.clientWidth/2){
			//需要用到以下两张鼠标的 绝对路径，请开源人员自行修改一下
			box.css('cursor','url(images/next.cur),pointer');
			box.attr('title','下一页');
		}else{
			box.css('cursor','url(images/prev.cur),pointer');
			box.attr('title','上一页');
		}
	});
	
	$("#photo_view_back").click(function(){
		$("#content_detail").load("taPhotoPage.htm?family=${family}&album=${album}&friendPhoto=${friendPhoto}");
	});
	
	
	
});
function photoViewComments(photoId){
	var comments = $("#photo_view_commonts").val();
	if(IsNull(comments)){
		alert("请输入评论内容！");
		return ;
	}
	$.post("photoComments.htm",{
		picId:photoId,
		comments:comments
	},function(data){
		$("#photo_view_comments").html(data);
		$("#photo_view_commonts").val("");
	});
}
	
</script>
<div class="h_newNews_box">
	<div class="h_newNews_text" id="con_newNews_1" style="display: block;">
		<div class="data_h_newNews_nav">
			<span class="chapter">第 ${index}/${fn:length(photoList)} 张</span>|
			<a href="javascript:void(0);" class="current" id="photo_view_back">返回该专辑</a>
		</div>

		<div class="clear"></div>
		<div class="photosShow_box">
			<div class="photosShow_img" id="photo_view_img">
				<img src="${photo.url}" />
			</div>
			<div class="photosShow_text">
				<p>
					专辑：
					<a href="javascript:void(0);"
						onclick="photoPage('${photo.albumObj.identifier}')"><c:out
							value="${photo.albumObj.name }" />
					</a>(
					<c:out value="${photo.albumObj.pictureAmount}" />
					)
				</p>
				<p>
					时间：
					<fmt:formatDate value="${photo.gmtModified}"
						pattern="yyyy-MM-dd HH:mm" />
				</p>
			</div>
			<div class="comments">
				<div class="comments_img">
					<img src="${member.avatar}" width="60" height="60" />
				</div>
				<div class="comments_textarea">
					<textarea name="" cols="" rows="" id="photo_view_commonts"></textarea>
				</div>
				<div class="clear"></div>
				<div style="_margin-right: 5px;" class="h_button fr mt5"
					onclick="photoViewComments('${photo.identifier}');">
					<strong>发 表</strong>
				</div>

				<div class="clear"></div>
			</div>
			<div id="photo_view_comments">
				<c:forEach items="${commentList}" var="comment">
					<div class="comments" style="margin-top: 10px;">
						<span style="float: left;"><c:out
								value="${comment.commentUserName}" /> 说道：</span><span
							style="float: right;"><fmt:formatDate
								value="${comment.gmtModified}" pattern="yyyy-MM-dd HH:mm" />
						</span>
						<br />
						&nbsp;&nbsp;&nbsp;&nbsp;
						<c:out value="${comment.content}" />
					</div>
				</c:forEach>
			</div>
		</div>
	</div>
	<div class="h_newNews_text" id="con_newNews_2">
		fdsfsdf
	</div>
</div>
